<template>
  <el-dialog
    :title="title"
    :visible="addlogVisible"
    width="580px"
    @close="closeDialog"
  >
    <div class="form-container">
      <el-form ref="floorFrom" :model="addForm" :rules="addFormRules">
        <el-form-item label="楼宇名称" prop="name">
          <el-input v-model="addForm.name" />
        </el-form-item>
        <el-form-item label="楼宇层数" prop="floors">
          <el-input v-model="addForm.floors" />
        </el-form-item>
        <el-form-item label="在管面积" prop="area">
          <el-input v-model="addForm.area" />
        </el-form-item>
        <el-form-item label="物业费" prop="propertyFeePrice">
          <el-input v-model="addForm.propertyFeePrice" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button size="mini" type="primary" @click="addfloors">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addfloorAPI, getdetailfloorAPI, editfloorAPI } from '@/api/company'
export default {
  name: 'Addfloor',
  props: {
    addlogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      addForm: {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null,
        id: ''
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入楼宇面积', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入楼宇物业费', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      if (this.addForm.id) {
        return '编辑'
      } else {
        return '添加'
      }
    }
  },
  methods: {
    closeDialog() {
      this.$refs.floorFrom.resetFields()
      this.addForm = {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null
      }
      this.$emit('closeDialog')
    },
    addfloors() {
      this.$refs.floorFrom.validate(async flag => {
        if (!flag) return
        if (this.addForm.id) {
          await editfloorAPI(this.addForm)
        } else {
          await addfloorAPI(this.addForm)
        }
        this.$emit('Nrender')
        this.closeDialog()
      })
    },
    async getdetailfloor(zid) {
      const res = await getdetailfloorAPI(zid)
      const { name, floors, area, propertyFeePrice, id } = res.data
      this.addForm = { name, floors, area, propertyFeePrice, id }
    }

  }
}
</script>

<style>

</style>
